import React from 'react'
export default function About() {
    const [num, setNum] = React.useState(0)
    const [name, setName] = React.useState('Fong')
    // useEffect中传入的函数，一定会在componentDidMount时调用一次
    // 至于在不在componentDidUpdate时调用，要看useEffect的第二个参数，如果为空数组或者不传，则只在componentDidMount时调用一次
    // 若想在指定的状态变化时调用，则需要在第二个参数（数组）中传入对应的状态变量
    // 以下会在num变化时调用
    React.useEffect(()=>{
        console.log('useEffect')
        let timer = setInterval(()=>{
            setNum(num => num+1)
        }, 1000);
        return () => {
            console.log('组件被卸载了')
            // 此处返回的函数会在componentWillUnmount时调用
            clearInterval(timer)
        }
    }, [])
    const handleAdd = () => {
        // setNum写法一：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
        // setNum(num + 1)

        // setNum写法二：参数为函数，接受原本的状态值，内部用其覆盖原来的状态值
        setNum((prev) => prev + 1)
    }
    const handleChange = () => {
        // setNum写法一：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值
        setName('方晓炜')

        // setNum写法二：参数为函数，接受原本的状态值，内部用其覆盖原来的状态值
        // setName((prev) => prev + 1)
    }
  return (
    <>
    <div>{num}</div><button onClick={handleAdd}>点我+1</button>
    <div>{name}</div><button onClick={handleChange}>点我改名</button>
    </>
  )
}
